<template>
	<view class="page">
		<u-navbar title="文章检索" :auto-back="true">
			<view class="u-nav-slot" slot="right">
				<view class="nav-right" @click="openPopUp">
					<!-- <u-icon name="search" size="24" color="#376CB4"></u-icon> -->
					<u-icon name="list" size="24" style="margin-left: 20rpx;" color="#000"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- 导航分类 -->
		<view class="search-nav">
			<picker @change="bindPickerChangeYear" style="width: 28%;" :value="yearIndex" :range="itemYear"
				range-key="columnsname">
				<view class="search-nav-item" style="width: 100%;">
					<text class="font-26 search-nav-title">{{yearStr?yearStr:'选择年份'}}</text>
					<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
				</view>
			</picker>

			<picker @change="bindPickerChangeQs" :value="qsIndex" style="width: 28%;" range-key="columnsname"
				:range="itemQs">
				<view class="search-nav-item" style="width: 100%;">
					<text class="font-26 search-nav-title">{{qsStr?qsStr:'选择期数'}}</text>
					<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
				</view>
			</picker>

			<picker @change="bindPickerChangeLm" :value="lmIndex" style="width: 38%;" range-key="columnsname"
				:range="itemLm">
				<view class="search-nav-item" style="width: 100%;">
					<text class="font-26 search-nav-title">{{lmStr?lmStr:'选择栏目'}}</text>
					<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
				</view>
			</picker>
		</view>

		<!-- 搜索 -->
		<view class="search-box">
			<view class="search-box-input">
				<u--input placeholder="请输入关键词" v-model="keyword"
					placeholderStyle="font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #333333;"
					border="none"></u--input>
			</view>
			<view class="search-box-btn" @click="seachFun">检索</view>
		</view>
		<!-- 搜索列表 -->
		<view class="search-list">
			<view class="search-empty" v-if="rst.length <= 0">
				<image src="../../static/kong.png" class="empty-img"></image>
			</view>

			<view class="search-list-item" v-for="(item,index) in rst" :key="index" @click="gotoDetail(item)">
				<image src="../../static/pdf.png" class="search-list-item-img"></image>
				<view class="search-list-item-content">
					<view class="search-list-item-content-t font-28">{{item.title}}</view>
					<view class="search-list-item-content-b">
						<view class="font-24">{{item.addtime}}</view>
						<view class="font-24 search-list-item-content-bb">
							<u-icon name="eye" color="#999999" style="margin-right: 10rpx;" size="18"></u-icon>
							<text>{{item.hits}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<CommonTk ref="commonTk"></CommonTk>
	</view>
</template>

<script>
	import CommonTk from '@/components/CommonTk.vue'
	import {
		api,
		BaseImgUrl,
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				yearIndex: 0,
				yearStr: '',

				qsIndex: 0,
				qsStr: '',

				lmIndex: 0,
				lmStr: '',

				itemYear: [],
				itemQs: [],
				itemLm: [],

				keyword: '',
				page: 1,
				total_page: 1,
				rst: [],
				fid: '',
				sid: '',
				tid: '',
			}
		},
		components: {
			CommonTk
		},
		filters: {},
		mounted() {},
		onLoad(e) {
			this.getSearchItemYear()
		},
		onShow() {},
		beforeDestroy() {},
		onReachBottom() {
			if (this.page < this.total_page) {
				this.page = this.page + 1
				this.search()
			} else {
				console.log('no more')
			}
		},
		onPageScroll(e) {},
		methods: {
			openPopUp() {
				this.$refs.commonTk.openShow()
			},
			seachFun() {
				this.page = 1
				this.rst = []
				this.search()
			},
			search() {
				api.post('api/index/searchList', {
					fid: this.fid,
					sid: this.sid,
					tid: this.tid,
					page: this.page,
					pageSize: 15,
					keyword: this.keyword
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						let result = rst.data
						this.total_page = result.last_page
						let temp_rst = result.data;
						this.rst = this.rst.concat(temp_rst)
						if (this.rst.length <= 0) {
							uni.$u.toast('暂无数据')
						}
					} else {
						uni.$u.toast(rst.msg)
					}
				}).catch(err => {})
			},
			gotoDetail(item) {
				uni.navigateTo({
					// url: '/pages/journal_dynamics/detail',
					url: '/pages/journal_introduction/detail?id=' + item.id
				})
			},
			//获取搜索项--年份
			getSearchItemYear() {
				api.post('api/index/searchItem', {
					bid: 37
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.itemYear = rst.data
					}
				}).catch(err => {})
			},
			//获取搜索项--期数
			getSearchItemQs(id) {
				api.post('api/index/searchItem', {
					bid: id
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.itemQs = rst.data
					}
				}).catch(err => {})
			},
			//获取搜索项--栏目
			getSearchItemLm(id) {
				api.post('api/index/searchItem', {
					bid: id
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.itemLm = rst.data
					}
				}).catch(err => {})
			},
			bindPickerChangeYear: function(e) {
				this.yearIndex = e.detail.value
				this.itemQs = []
				this.itemLm = []
				this.qsStr = ''
				this.sid = ''
				this.lmStr = ''
				this.tid = ''
				this.qsIndex = 0
				this.lmIndex = 0

				this.yearStr = this.itemYear[e.detail.value].columnsname
				this.getSearchItemQs(this.itemYear[e.detail.value].id)
				this.fid = this.itemYear[e.detail.value].id


			},
			bindPickerChangeQs(e) {
				this.itemLm = []
				this.lmStr = ''
				this.tid = ''
				this.lmIndex = 0

				this.qsIndex = e.detail.value
				this.qsStr = this.itemQs[e.detail.value].columnsname
				this.getSearchItemLm(this.itemQs[e.detail.value].id)
				this.sid = this.itemQs[e.detail.value].id

			},
			bindPickerChangeLm(e) {
				this.lmIndex = e.detail.value
				this.lmStr = this.itemLm[e.detail.value].columnsname
				this.tid = this.itemLm[e.detail.value].id
			}
		}
	};
</script>

<style scoped>
	.search-list-item-content-t {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.search-list-item-content-bb {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search-list-item-content-b {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.search-list-item-img {
		width: 102rpx;
		height: 106rpx;
	}

	.search-list-item-content {
		width: 550rpx;
		height: 106rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.search-list-item {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #E5E5E5;
		padding: 30rpx 0;
	}

	.empty-img {
		width: 364rpx;
		height: 293rpx;
	}

	.search-empty {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.search-box {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.search-box-input {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
	}

	.search-box-btn {
		width: 96rpx;
		height: 66rpx;
		background: #535b8a;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.search-box-input {
		width: 579rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.search-nav-title {
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.search-nav {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.search-nav-item {
		display: flex;
		height: 66rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	::v-deep .u-navbar__content {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(4, 0, 0, 0.14);
	}

	.nav-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.logo {
		width: 306rpx !important;
		height: 55rpx !important;
	}
</style>